nitromefandomcom-20200223-history
User blog:Ayernam/Imagemaps!
Hello everybody! For the past few days, I have been working on something really exciting that I also think is really awesome! Okay, so it turns out that we have an extension called "imagemap" installed in this wiki, and it creates a sort of "interactive" image, where there are links on the image as well as tooltips. These links, when clicked, can lead a user to a page to learn more about that image. these links can also be restricted to certain portions of the image, so that the link and tooltip will only be shown when the cursor hovers over that portion. Anyway, when I discovered this extension, I immediately thought, "How can this be used on the wiki?". With some thought, I realized that this extension could have many applications in our articles! Interactive skins The first idea that came to me was "interactive skins". These would be images of skins that were modified with the imagemap extension so that, when a reader hovered over a character of enemy or objects in the skin, a link and tooltip would be displayed, taking the reader to the article for that object! For example, if someone was looking at the horror skin, and wondered what in the world those creatures were, they could just hover over them, and they would be linked straight to a full descriptive article (hopefully) on what that creature was supposed to be! This can help in other skins as well, such as when Nitrome puts a character or enemy in a skin that a reader doesn't recognize, either because they haven't played the game, or the character doesn't come from a game. As an example, I have imagemapped the first skin Nitrome ever made, the classic skin: Image:Classic tile.gif|700px desc none rect 1203 499 1237 538 An octopus from the Hot Air series rect 1188 484 1207 502 A squirrel from Chick Flick rect 1156 444 1173 464 A squirrel from Chick Flick rect 1137 400 1221 482 A pirate ship rect 1072 490 1129 526 A pear doodle from Scribble rect 1130 289 1158 328 An electro brain rect 1051 276 1071 305 Poly from Roly Poly rect 1035 225 1077 267 A balloon shaped like a chick from Chick Flick rect 1102 193 1144 235 A balloon shaped like an electro brain rect 1122 160 1164 202 A balloon shaped like a boulder doodle from Scribble rect 1077 167 1120 209 A balloon shaped like an unknown sphere-headed creature rect 1035 124 1084 167 The tank from Tanked Up rect 1106 154 1125 165 A bullet rect 1052 323 1065 343 A key rect 1030 367 1054 393 A hermit crab rect 981 338 995 355 A hermit crab rect 762 512 787 537 A hermit crab rect 664 466 722 522 A caterpillar doodle from Scribble rect 702 426 718 464 A drill from Hot Air rect 686 398 703 436 A drill from Hot Air rect 671 361 726 409 An unknown sphere-headed creature in a plane rect 761 359 816 406 An unknown sphere-headed creature in a plane rect 777 190 818 235 An unnamed robot rect 765 236 817 255 Two land mines from Tanked Up rect 595 274 611 307 An unknown sphere-headed creature rect 590 225 653 302 An early Nitrome Towers rect 536 394 558 422 A chick from Chick Flick rect 527 446 580 525 A paint blower rect 402 373 464 487 A dragon worm from the Hot Air series rect 334 461 376 530 Hot Air, a main character from the Hot Air series rect 197 369 265 429 Three blots from Scribble rect 238 336 263 358 A bee from Feed Me rect 284 332 320 350 A dragonfly from Feed Me rect 340 342 376 361 A dragonfly from Feed Me rect 151 192 172 219 A chick from Chick Flick rect 127 201 189 273 A treasure chest rect 80 389 93 406 A fly from Feed Me rect 96 381 112 398 A fly from Feed Me rect 118 390 130 407 A fly from Feed Me rect 76 406 109 456 A venus fly trap from Feed Me rect 107 405 130 460 A venus fly trap from Feed Me rect 337 250 355 285 A sleepwalker from Sandman rect 316 234 344 258 A sleepwalker from Sandman rect 302 225 324 248 A sleepwalker from Sandman rect 330 191 353 214 A nightmare from Sandman rect 282 186 336 247 A portal from Sandman rect 988 397 1034 419 Two moles from Chick Flick default This is the classic skin, the first skin Nitrome ever made for their website Interactive level select screens The next idea that came to me was "interactive level select screens". These would be images of level select screens for a game, except modified to show links on every level button to a walkthrough for that level! For example, a link on the button for level one of, say, Mutiny, would link to the video walkthrough file on the Nitrome Wiki that showed how to complete that level! As an example, I have created an imagemap of the level select screen of Roly Poly: image:Roly Poly - Level select screen.png desc none rect 259 60 288 90 poly 304 62 331 67 326 95 298 89 poly 349 72 373 85 361 110 336 97 poly 389 94 410 110 393 131 372 115 poly 423 121 442 141 422 160 402 139 poly 451 155 466 178 442 194 427 169 poly 473 194 482 222 455 230 446 203 poly 485 239 487 267 459 268 457 241 poly 487 282 485 309 457 308 459 280 poly 457 319 482 327 473 354 446 344 poly 443 355 466 369 452 394 427 378 poly 420 388 441 407 422 428 401 409 poly 394 416 410 438 389 455 371 433 poly 362 438 373 463 348 476 336 450 poly 298 458 326 453 331 481 304 486 rect 259 460 287 489 poly 221 453 249 459 243 487 214 480 poly 186 438 210 450 198 476 173 464 poly 154 416 176 433 159 455 136 439 poly 126 388 145 408 124 428 105 407 poly 105 355 119 380 96 394 80 370 poly 91 318 101 345 73 354 64 328 poly 59 281 88 280 90 308 61 310 poly 61 238 89 240 87 269 59 266 poly 74 194 100 203 91 230 64 221 poly 95 154 119 169 104 193 80 178 poly 124 121 145 140 126 160 105 141 poly 158 92 175 114 153 132 135 109 poly 199 72 210 98 185 109 173 84 poly 215 66 243 61 249 88 220 94 default Welcome to the level select screen for Roly Poly. Click on a level to watch a video walkthrough for it! How imagemaps work After all of these examples, you may be wondering how an imagemap works. I am sure many of you have seen them before, or even used them. Basically, in the first line, you state the image that you want to imagemap, then in the following lines, you state the shapes of the links you want to create. They include poly (polygon), rect (rectangle), and circle. You then have to give the coordinates for the shape you want to create. Finally, you give the link of the article you want the object to be linked to. Also, you may want to have a default line, which states the link that will be shown when the reader is not hovering over an object. The full article on imagemaps on the MediaWiki site is below. If you are to create an imagemap, I recommend you read that article, as I have given very vague instructions. MediaWiki article on imagemaps: http://www.mediawiki.org/wiki/Imagemap To create an imagemap Want to know how I created those imagemaps? Well, these are the steps I went through: #I read the MediaWiki article above. #I saved the image I wanted to imagemap to my computer, then opened it with Gimp. #I hovered over the vertices of the object I wanted to link to in Gimp, then looked at the bottom left corner. There, I saw the exact coordinates of the point I was hovering over. #I typed the coordinates into the imagemap code, then repeated step three for each vertex of the object. #I repeated steps three and four for every object I wanted to link to. #I created a default link. This process takes time! And patience! And many hours of staring at nonsensical digits and typing! However, the result is always awesome, so I think its well worth the effort. :) Conclusion Well, that's all for now! Hopefully these imagemaps that I've created can be implemented into their respective articles. If you would like to create an imagemap, then awesome! Just make sure no one else is creating an imagemap of the same skin or level select screen as you, or else two people will have put in much effort for the same product. If you have any suggestions or questions, just leave them in the comments below! Thanks for reading! Category:Blog posts